﻿@model SMECustomerWebsite.Models.ViewModels.PortfolioManagement.AccountPlanningDataViewModel

<div class="" role="tabpanel" data-example-id="togglable-tabs">
    @Html.Action("SubMenuPortfolioManagement", "System")
    <div id="myTabContent" class="tab-content">
        <div role="tabpanel" class="tab-pane fade active in" id="tab_content2" aria-labelledby="profile-tab">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>
                                @SMECustomerWebsite.Core.Resources.Resource.View
                                <small>@SMECustomerWebsite.Core.Resources.Resource.AccountPlanning of</small> @Model.CustName<small id="pm-ap-time-view"> @DateTime.Now.Month / @DateTime.Now.Year</small>
                            </h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <ul class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                                <li id="pm-ap-data-tab" role="presentation" class="">
                                    @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.AccountPlanningEdit, "ViewDataAccountPlanning", "PortfolioManagement", new { cif = @Model.Cif }, null)
                                </li>
                                <li id="pm-ap-finance-tab" role="presentation" class="">
                                    @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.AccountPlanningEditFinance, "AccountPlanningFinance", new { cif = @Model.Cif }, null)
                                </li>
                                <li id="pm-ap-product-holding-tab" role="presentation" class="active">
                                    @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.AccountPlanningEditProductHolding, "ProductHolding", "PortfolioManagement", new { cif = @Model.Cif }, null)
                                </li>
                            </ul>
                            <div id="search-time-box" class="col-md-3 cm-search-box">
                                <select class="search_column form-control" tabindex="-1" required>
                                    <option></option>
                                </select>
                            </div>
                            <table id="pm-ap-product-holding" class="table custom_table table-bordered table-striped jambo_table">
                                <thead class="headings">
                                    <tr>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.GroupHeader</th>
                                        <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.PortfolioHeader</th>
                                        <th class="column-title" id="pm-ap-table-col-plan">@SMECustomerWebsite.Core.Resources.Resource.PlanHeader</th>
                                        <th class="column-title" id="pm-ap-table-col-result">@SMECustomerWebsite.Core.Resources.Resource.ResultHeader</th>
                                        <th class="column-title" id="pm-ap-table-col-comp">@SMECustomerWebsite.Core.Resources.Resource.CompleteHeader</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#pm-ap-product-holding').DataTable({
                "order": [[0, 'asc']],
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                rowsGroup: [0],
                bPaginate: false,
                bInfo: false,
                "sAjaxSource": '@Url.Action("ProductHoldingData", "PortfolioManagement")' + '?cif=@Model.Cif',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "simple_numbers",//"full_numbers",
                "aoColumns": [
                            { "sName": "Group", "bSortable": false },
                            { "sName": "PortfolioHeader", "bSortable": false },
                            { "sName": "PlanHeader", "bSortable": false },
                            { "sName": "ResultHeader", "bSortable": false },
                            { "sName": "CompleteHeader", "bSortable": false }],
                "aoColumnDefs": [{
                    "aTargets": [0],
                    "width": "15%"
                }, {
                    "aTargets": [1],
                    "width": "30%"
                }],
                "drawCallback": function (settings) {
                    $(".progress-bar").progressbar();
                }
            });
            var dataSearch = [{ id: 0, text: '@DateTime.Now.Year' }, { id: 1, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Jan') }, { id: 2, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Feb') }, { id: 3, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Mar') }, { id: 4, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Apr') }, { id: 5, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.May') }, { id: 6, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Jun') }, { id: 7, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Jul') }, { id: 8, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Aug') }, { id: 9, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Sep') }, { id: 10, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Oct') }, { id: 11, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Nov') }, { id: 12, text: decodeHtml('@SMECustomerWebsite.Core.Resources.Resource.Dec') }];
            $(".search_column").select2({
                placeholder: "Select time",
                data: dataSearch
            });

            table.columns().every(function () {
                var that = this;

                $(".search_column").on("change", function (e) {
                    var date = new Date();
                    $("#pm-ap-time-view").html(this.value + " / " + date.getFullYear());
                    table.search(this.value).draw();
                });
            });
        })
    </script>
    <script type="text/javascript">
        function startPageTourGuide() {
            var intro = introJs();
            var steps = [
                    {
                        element: '#pm-ap-tab',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccountPlanningTab"
                    },
                    {
                        element: '#pm-pm-tab',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuidePortManTab",
                        position: 'right'
                    },
                    {
                        element: '#pm-ap-data-tab',
                        intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewDataTab',
                        position: 'bottom'
                    },
                    {
                        element: '#pm-ap-finance-tab',
                        intro: '@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewFinanceTab',
                        position: 'right',
                    },
                    {
                        element: '#pm-ap-product-holding-tab',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewProductHoldingTab",
                        position: 'bottom'
                    },
                    {
                        element: "#search-time-box",
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewProductHoldingTab",
                        position: 'bottom'
                    },
                    {
                        element: '#pm-ap-product-holding',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewDataForm",
                        position: 'bottom'
                    },
                    {
                        element: '#pm-ap-table-col-plan',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewDataForm",
                        position: 'bottom'
                    },
                    {
                        element: '#pm-ap-table-col-result',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewDataForm",
                        position: 'bottom'
                    },
                    {
                        element: '#pm-ap-table-col-comp',
                        intro: "@SMECustomerWebsite.Core.Resources.Resource.TourGuideAccViewDataForm",
                        position: 'bottom'
                    }
            ];
            intro.setOptions({
                steps: steps,
                showProgress: true,
                scrollToElement: true,
            });
            intro.setOption('tooltipPosition', 'auto');
            intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
            intro.start();
        }
    </script>
}